
<template>
  <div>
<!--{{formValidate}}-->
<!--    {{ruleValidate}}-->
  <Form v-if="ruleValidate" ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="140" class="form-flex" :label-colon="true">
    <template v-for="(item,index) in forms">
<!--      {label:'论文名称',key:'name',type:'input',value:''},-->
      <FormItem :label="item.label" :prop="item.key" v-if="item.type=='input'">
        <Input v-model="formValidate[item.key]" :placeholder="'请输入'+item.label" show-word-limit :maxlength="64"></Input>
      </FormItem>

      <FormItem :label="item.label" :prop="item.key" v-if="item.type=='selectinput'">
<!--        <Input v-model="formValidate[item.key]" :placeholder="'请输入'+item.label"></Input>-->
        <AutoComplete  show-word-limit :maxlength="64"
            v-model="formValidate[item.key]"
            :data="item.data"
            :placeholder="'请输入'+item.label" />
      </FormItem>

      <FormItem :label="item.label" :prop="item.key" v-if="item.type=='select'">
        <Select filterable v-model="formValidate[item.key]" :placeholder="'请选择'+item.label">
          <Option :value='op.value' v-for="(op,i) in item.options" v-if="item.options && item.options.length>0" :key="i">
            {{op.label}}
          </Option>
        </Select>
      </FormItem>
      <FormItem :label="item.label" v-if="item.type=='date'" :prop="item.key+'date'">
<!--        {{formValidate[item.key+'date']}}&#45;&#45;&#45;&#45;{{item.key+'date'}}-->
        <DatePicker type="date" format="yyyy-MM-dd" :placeholder="'请选择'+item.label" v-model="formValidate[item.key]" style="width: 100%"
        @on-change="changedate(item.key)"
        />
      </FormItem>


      <FormItem :label="item.label" v-if="item.type=='year'" :prop="item.key">
<!--        <DatePicker type="year" format="yyyy" :clearable="false" :placeholder="'请选择'+item.label" v-model="formValidate[item.key]" style="width: 100%"/>-->
        <Select filterable v-model="formValidate[item.key]" :placeholder="'请选择'+item.label" filterable clearable>
          <Option :value='year+""' v-for="(year,i) in yearlist"  :key="year+''">{{year}}</Option>
        </Select>
      </FormItem>


      <FormItem :label="item.label" :prop="item.key" v-if="item.type=='radio'">
        <RadioGroup v-model="formValidate[item.key]">
          <Radio :label='op.value' v-for="(op,i) in item.options"  :key="i">
            {{op.label}}
          </Radio>
        </RadioGroup>
      </FormItem>



      <FormItem :label="item.label" :prop="item.key" v-if="item.type=='check'">
        <CheckboxGroup v-model="formValidate[item.key]">
          <Checkbox label="Eat"></Checkbox>
          <Checkbox label="Sleep"></Checkbox>
          <Checkbox label="Run"></Checkbox>
          <Checkbox label="Movie"></Checkbox>
        </CheckboxGroup>
      </FormItem>
      <FormItem :label="item.label" :prop="item.key" v-if="item.type=='textarea'">
        <Input v-model="formValidate[item.key]" type="textarea" :autosize="{minRows: 2,maxRows: 5}"  :placeholder="'请输入'+item.label"></Input>

      </FormItem>



      <FormItem :label="item.label" :prop="item.key" v-if="item.type=='uploadimg'">
        <item-upload
            ref="fileUpload"
            @upload-success="uplaodSuccess($event,index)"
            @del-item="deleteFile(index)"
            @upload-loading="handleFileUploading($event,index)"
            fileType="images"
            :isSingle="true"
            :fileList="formValidate[item.key]"
            :isConfirm="false"
            :allFileType="false"
            :formatArr="['png', 'jpg', 'jpeg']"
        ></item-upload>
      </FormItem>
      <FormItem :label="item.label" :prop="item.key" v-if="item.type=='uploaddoc'">

        <item-upload
            ref="fileUpload"
            @upload-success="uplaodSuccess($event,index)"
            @del-item="deleteFile(index)"
            @upload-loading="handleFileUploading($event,index)"
            fileType="docs"
            :isSingle="true"
            :fileList="formValidate[item.key]"
            :isConfirm="false"
            :allFileType="false"
            :formatArr="['doc', 'docx', 'pdf','rar','zip']"
        ></item-upload>
      </FormItem>




        <FormItem :label="item.label" :prop="item.key" v-if="item.type=='wcxs'">
          <div style="display: flex;justify-content: space-between;width: 100%">
          <RadioGroup v-model="formValidate[item.key]">
            <Radio label='独立完成'  key="独立完成">独立完成</Radio>
            <Radio label='与外单位合作'  key="与外单位合作">与外单位合作</Radio>
          </RadioGroup>
          <Input v-model="formValidate.text2" placeholder="请输入合作外单位的名称" style="width: 260px" v-if="formValidate[item.key]==='与外单位合作'"  show-word-limit :maxlength="64"/>
          </div>
        </FormItem>
<!--        <FormItem label="合作外单位的名称" prop="text2" v-if="formValidate[item.key]==='与外单位合作' && item.type=='wcxs'" >-->
<!--          <Input v-model="formValidate.text2" placeholder="请输入合作外单位的名称"/>-->
<!--        </FormItem>-->



<!--      合作类型-->
      <FormItem :label="item.label" :prop="item.key" v-if="item.type=='hzlx'" ref="aform">
        <div style="display: flex;justify-content: space-between;width: 100%">
        <RadioGroup v-model="formValidate[item.key]">
          <Radio label='独立'  key="独立">独立</Radio>
          <Radio label='联合'  key="联合">联合</Radio>
        </RadioGroup>
        <Input v-model="formValidate.text2" placeholder="请输入联合单位的名称" style="width: 260px" v-if="formValidate[item.key]==='联合'"  show-word-limit :maxlength="64"/>
        </div>
      </FormItem>


    </template>

  </Form>

  </div>
</template>

<script>
import {
  mapActions,
  mapState
} from 'vuex'

import {debounce} from "../../../libs/utils";
import {getDirectionForSelect} from "../../../api/achievements";
import ItemUpload from '@/components/item-upload';

export default {
  name: 'achievedit',
  props: ['lists','ainfo','close'],
  components:{ItemUpload},
  data() {
    return {
      toolFileList:{},
      modal: false,
      forms:this.lists,
      formValidate:this.ainfo||{},
      fileUploading:{},
      yearlist:[],
      ruleValidate:null,
      datekeys:[],


    }
  },
  watch: {
    ainfo: { //路由修改后init 页面
      handler: function(newv,oldv) {
        newv = newv||{}
        this.datekeys.forEach(item=>{
          if(newv[item]){
            newv[item+'date'] = newv[item]+""
          }else {
            newv[item+'date'] = ''
          }


        })



        this.formValidate = newv
      },
      deep: true
    }
  },

  created() {


  },
  filters: {

  },
  computed: {
  },
  mounted() {
    this.initForms()

    let curYear = new Date().getFullYear()
    let yearlist = []
    for(let i=0;i<200;i++){
      yearlist.push(curYear-i)
    }
    this.yearlist = yearlist


  },
  beforeDestroy() {

  },
  methods: {

    handleFileUploading(status,index) {

      this.fileUploading[index] = status;
    },
    // 添加了源文件，设置数据
    uplaodSuccess(file,index) {
      // formValidate[item.key] item=form[index]

      let item = this.forms[index]||{}
      let key = item.key
      if(key && this.formValidate){
        this.formValidate[key] = [
          {
            id: file.fileId,
            fileName: file.fileName,
            path: file.filePath
          }
        ]

         this.formValidate = JSON.parse(JSON.stringify(this.formValidate))
      }

      let toolFileList = JSON.parse(JSON.stringify(this.toolFileList))
      toolFileList[index] = [
        {
          id: file.fileId,
          fileName: file.fileName,
          path: file.filePath
        }
      ];
      this.toolFileList = toolFileList

    },
    // 删除源文件，将相关数据清除
    deleteFile(index) {
      let item = this.forms[index]||{}
      let key = item.key
      if(key){
        this.formValidate[key] = null
      }

      let toolFileList = JSON.parse(JSON.stringify(this.toolFileList))
      toolFileList[index] = []
      this.toolFileList = toolFileList
      // this.formValidate.file = null;

      // this.$nextTick(() => {
      //   this.$refs.formValidate.validateField('file');
      // });
    },

    init(){
      this.initForms()

    },
    changedate(key){
      console.log('key',key)
      let vkey =key+'date'

      this.formValidate[vkey] = this.formValidate[key]+''
      // {{formValidate[item.key+'date']}}-

    },

    async initForms(){
      let forms = []
      for(let i=0;i<this.lists.length;i++){
        let item = this.lists[i]
        item.options=item.options||[]
        if(item.dictid){
          let res = await getDirectionForSelect(item.dictid)// .then(res=>{
          let options = res || []
          item.options = options
          // AutoComplete的data数据
          if(item.type==='selectinput'){
            let autodata = []
            options.forEach(item=>{
              if(item && item.label){
                autodata.push(item.label)
              }
            })
            item.data = autodata
          }

        }
        forms.push(item)
      }
      this.forms = forms




      let info = {}
      //  {label:'项目来源',key:'origin',type:'select',options:[{label:'国家973项目',value:'国家973项目'}],require:true,vt:'int'},
      let ruleValidate = {}

      this.lists.forEach(item=>{
        let key = item.key
        let vt = item.vt+'' // value 的类型
        info[key] = vt==='int'?0:''
        let type = item.type+""
        if(type.includes('upload')){
          info[key] = []
        }

        if(type==='date'){
          info[key+'date'] = ''
          this.datekeys.push(key)
        }


        if(item.require){
          // ruleValidate[key] =  {required: true, message: `${item.label}不能为空`, trigger: 'blur'}
          if(type==='date'){
            ruleValidate[key+'date'] =  {required: true, message: `${item.label}不能为空`, trigger: 'change'}
          }else if (type==='selectinput'){
            ruleValidate[key] =  [
                {required: true, message: `${item.label}不能为空`, trigger: 'blur'},
                { min: 0, max: 64, message: `${item.label}长度在 1 到 64 个字符之间`, trigger: 'blur' }
            ]
          }else {
            ruleValidate[key] =  {required: true, message: `${item.label}不能为空`, trigger: 'blur'}
          }
        }else {
          if (type==='selectinput'){
            ruleValidate[key] =  [
              { min: 0, max: 64, message: `${item.label}长度在 1 到 64 个字符之间`, trigger: 'blur' }
            ]
          }
        }


      })

      // ruleValidate: {
      //   name: [
      //     {required: true, message: 'The name cannot be empty', trigger: 'blur'}
      //   ],
      // }

      this.ruleValidate = ruleValidate

      this.formValidate = info||{}
    }



  },

}
</script>
<style scoped>
.form-flex{
  display: flex;
  flex-wrap: wrap;
}
.form-flex /deep/ .ivu-form-item{
  width: 48%;
}

</style>
